<template>
  <div class="main-layout">
    <div class="content">
      <SideBar v-if="showSidebar" />
      <router-view />
    </div>
    <NavBar v-if="showNavbar" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import NavBar from '@/components/common/NavBar.vue'
import SideBar from '@/components/common/SideBar.vue'

const route = useRoute()
const showSidebar = computed(() => route.path.startsWith('/landlord'))
const showNavbar = computed(() => !route.path.startsWith('/landlord/add-house'))

</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: #f8f9fa;
}

.content {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin: 16px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}
</style>